<template>
  <PageContainer>
    <Title title="计费规则">
      <template #default>
        <el-button type="primary" plain>添加计费规则</el-button>
      </template>
    </Title>
    <el-table :data="priceRuleTableData">
      <el-table-column prop="name" label="计费规则名称" />
      <el-table-column prop="price" label="规则摘要" />
      <el-table-column prop="createTime" label="关联场地" />
      <el-table-column prop="updateTime" label="操作" />
    </el-table>

    <el-dialog title="添加计费规则" v-model="addPriceRuleModalVisible" width="900px">
      <div class="px-20px">
        <Tip
          title="系统将项目营业时间自动设为服务时段，若服务时段价格不一致，可调整计费规则时段；设置完成后，再设置定价规则。"
        />
        <el-form :model="priceRuleForm" label-width="auto" class="mt-20px">
          <el-form-item label="所属项目" prop="name" required>
            <el-select v-model="priceRuleForm.projectId" class="w-210px!" placeholder="请选择">
              <!-- <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="计费规则名称" prop="name" required>
            <el-input v-model="priceRuleForm.ruleName" class="w-210px!" placeholder="请输入计费规则名称" />
          </el-form-item>
          <el-form-item label="服务时段价格" prop="name" required>
            <div v-for="(item, index) in priceRuleForm.timePriceList" :key="index" class="flex items-center">
              <el-select v-model="item.startTime" class="w-120px!">
                <!-- <el-option v-for="item in serviceTimeList" :key="item.id" :label="item.name" :value="item.id" /> -->
              </el-select>
              <span class="mx-5px">至</span>
              <el-select v-model="item.endTime" class="w-120px!">
                <!-- <el-option v-for="item in serviceTimeList" :key="item.id" :label="item.name" :value="item.id" /> -->
              </el-select>

              <span class="ml-20px">现金价</span>
              <el-input v-model="item.price" placeholder="请输入" class="w-120px! mx-5px" />
              <span>小时/元</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="center">
          <el-button type="primary" @click="submit">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <Title title="定价模版" class="mt-20px">
      <template #default>
        <el-button type="primary" plain>添加定价模板</el-button>
      </template>
    </Title>
    <el-table :data="templateTableData">
      <el-table-column prop="name" label="定价模板名称" />
      <el-table-column prop="price" label="场地" />
      <el-table-column prop="createTime" label="周几" />
      <el-table-column prop="createTime" label="计费规则" />
      <el-table-column prop="createTime" label="状态" />
      <el-table-column prop="updateTime" label="操作" />
    </el-table>
    <Tip class="mt-10px">
      <template #default>
        先创建不同时段的计费规则，然后再设置场地在不同日期范围内的定价模版。<el-link
          type="primary"
          @click="tipDialog = true"
          >示例</el-link
        >
      </template>
    </Tip>
    <el-dialog title="查看示例" v-model="tipDialog" width="1000px">
      <img src="@/assets/images/price_rule_tip.png" width="850px" class="mx-50px" alt="" />
    </el-dialog>
    <el-dialog v-model="addTemplateDialog" width="800px" title="添加定价模板">
      <div class="px-20px">
        <Tip title="添加定价模板时，需要提前添加计费规则，若每天消费价格不同，可设置不同的计费规则。" />
        <el-form :model="templateForm" label-width="auto" class="mt-20px">
          <el-form-item label="所属项目" required>
            <el-select v-model="templateForm.projectId" placeholder="请选择" class="w-210px!">
              <!-- <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              /> -->
            </el-select>
          </el-form-item>
          <el-form-item label="项目定价名称" required>
            <el-input v-model="templateForm.templateName" class="w-210px!" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="选择星期" required>
            <el-col class="h-26px">
              <el-checkbox v-model="weekCheckAll">全选</el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox-group v-model="templateForm.week">
                <el-checkbox v-for="(item, index) in weekList" :key="index" :label="item.value">{{
                  item.label
                }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>
          <el-form-item label="选择场地" required>
            <el-col class="h-26px">
              <el-checkbox v-model="groundCheckAll">全选</el-checkbox>
            </el-col>
            <el-col>
              <el-checkbox-group v-model="templateForm.groundId">
                <el-checkbox v-for="(item, index) in groundList" :key="index" :label="item.value">{{
                  item.label
                }}</el-checkbox>
              </el-checkbox-group>
            </el-col>
          </el-form-item>
          <el-form-item label="计费规则" required>
            <el-select v-model="templateForm.ruleId" placeholder="请选择" class="w-210px!">
              <!-- <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              /> -->
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="center">
          <el-button type="primary">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </PageContainer>
</template>

<script lang="ts" setup>
defineOptions({ name: 'BookBillingRules' })
// 计费规则相关
const priceRuleTableData = ref([])
const addPriceRuleModalVisible = ref(false)
const projectList = ref([])
const serviceTimeList = ref([])
const submit = () => {}
const priceRuleForm = reactive({
  ruleName: '',
  projectId: '',
  timePriceList: [
    {
      startTime: '',
      endTime: '',
      price: '',
    },
  ],
})

// 模板相关
const templateTableData = ref([])
const addTemplateDialog = ref(false)
const templateForm = reactive({
  projectId: '',
  templateName: '',
  week: [],
  ruleId: '',
  groundId: [],
})
const weekCheckAll = ref(false)
const weekList = ref([
  {
    label: '周一',
    value: 1,
  },
  {
    label: '周二',
    value: 2,
  },
  {
    label: '周三',
    value: 3,
  },
  {
    label: '周四',
    value: 4,
  },
  {
    label: '周五',
    value: 5,
  },
  {
    label: '周六',
    value: 6,
  },
  {
    label: '周日',
    value: 7,
  },
])
const groundCheckAll = ref(false)
const groundList = ref([
  {
    label: '1号',
    value: 1,
  },
])

const tipDialog = ref(false)
</script>

<style scoped lang="scss"></style>
